<template>
    <div>
        <Input v-model="name" class="inputlenth">
            <Button slot="append" icon="ios-search" @click="searchName"></Button>
        </Input>
        <Button type="error" @click="removeMore" style="marginRight:10px">删除多条记录</Button>
        <Button type="primary" @click="mesAdd">添加新记录</Button>
        <Table class="tab" border 
        :columns="columns7" :data="data6" :height="400" 
        @on-selection-change="onSelectChange"></Table>

        <Page class="page" :total="total" :page-size-opts="[5,10,20,40]" 
        show-elevator show-sizer show-total 
        @on-change="change" @on-page-size-change="changePage"></Page>

        <Modal v-model="modal" :title="titleUpdata">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="ID" prop="_id" v-if="idFlag">
                    <Input v-model="formValidate._id" readonly></Input>
                </FormItem>
                <FormItem label="姓名" prop="name">
                    <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input v-model="formValidate.password" placeholder="请输入密码"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                columns7: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title:"编号",
                        key:'_id',
                        align: 'center',
                    },
                    {
                        title: '姓名',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '密码',
                        key: 'password',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.row)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data6: [],
                total: 1,
                limit: 10,
                page: 1,
                pageList : [],
                list : [],
                name:"",
                ids:[],
                modal: false,
                formValidate: {
                    name: '',
                    password:'',
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                    ],
                },
                titleUpdata:"",
                idFlag:false,
            }
        },
        methods: {
            show(row){
                this.modal = true;
                this.idFlag = true;
                this.titleUpdata = "修改用户信息";
                Object.assign(this.formValidate,row)
            },
            getData(){
                this.$http.post("http://127.0.0.1:3000/users/list",{name:this.name})
                .then(res=>{
                    this.list.splice(0,this.total);
                    var data = res.data;
                    this.total = data.length;
                    data.filter(val=>{
                        this.list.push(val)
                    });
                    this.pageList = this.list.slice(0,this.limit);
                    this.data6 = this.pageList
                })
            },
            upData(){
                this.pageList.splice(0, this.pageList.length);
                this.pageList=this.list.slice((this.page - 1) * this.limit,this.page * this.limit);
                this.data6 = this.pageList;
            },
            remove (row) {
                // this.data6.splice(index, 1);
                this.$Modal.confirm({
                    title: '删除提示',
                    content: '<p>确定要删除该记录？</p>',
                    onOk: () => {
                      console.log(row._id)
                        this.$http.delete("http://127.0.0.1:3000/users/data/"+row._id)
                        .then(res=>{
                            this.getData();
                            this.$Message.info('删除成功');
                        })
                    },
                    onCancel: () => {
                        // this.$Message.info('点击了取消');
                    }
                });
            },
            removeMore(){
                this.$Modal.confirm({
                    title: '删除提示',
                    content: '<p>确定要删除该记录？</p>',
                    onOk: () => {
                        this.$http.post("http://127.0.0.1:3000/users/removes",{ids:this.ids.toString()})
                        .then(res=>{
                            this.getData();
                            this.$Message.info('删除成功');
                        })
                    }
                });
            },
            change: function (page) {
                this.page = page;
                this.upData();
            },
            changePage(rows){
                this.limit = rows;
                this.upData();
            },
            searchName(){
                this.getData();
            },
            onSelectChange(rows){
                if(rows){
                    var ids = [];
                    rows.filter(res=>{
                        ids.push(res._id);
                    });
                    this.ids = ids;
                }
            },
            mesAdd(){
                this.modal = true;
                this.idFlag = false;
                this.formValidate = {}
                Object.assign(this.formValidate,{name:"",password:""});
                this.titleUpdata = "添加用户信息";
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    console.log(this.formValidate);
                    if (valid) {
                        if(this.formValidate._id){
                            this.$http.post("http://127.0.0.1:3000/users/data/"+this.formValidate._id,this.formValidate)
                            .then(res=>{
                                this.modal = false;
                                this.getData();
                                this.$Message.success('修改成功!');
                            })
                        }else{
                            this.$http.post("http://127.0.0.1:3000/users/data",this.formValidate)
                            .then(res=>{
                                this.modal = false;
                                this.getData();
                                this.$Message.success('提交成功!');
                            })    
                        }
                    }else{
                        this.$Message.error('表单验证失败!');
                    }
                   
                });
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        },
        created(){
          this.getData();
        }
    }
</script>

<style scoped>
  .tab{
    max-height:442px;
    /* overflow:scroll; */
    margin-top:10px
  }
  .page{
    margin-top:10px
  }
  .inputlenth{
      width:300px;
      float: left;
      margin-right: 20px;
  }
  
</style>